<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车页面</title>
    <link rel="stylesheet"  rel="icon" href="../../css/cart/shooping_cart.css" type="text/css" />
    <link rel="stylesheet" href="../../plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../../css/common/page_bottom.css">
    <link rel="stylesheet" href="../../css/iconfont/iconfont.css">
    <link rel="icon" href="../../imgs/favicon.ico" type="image/x-icon" />
</head>
<body >
    <div class="header">
        <div class="header-nav">
            <div class="header-log">
                <img src="../../imgs/mi.png" alt="">
            </div>
            <div class="header-middler">
                <h2>我的购物车</h2>
                <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
            </div>
            <div class="header-last">
                <a href="../personal_center/portal.html">2589511490</a>
                <span>|</span>
                <a href="../order/order_list.html">我的订单</a>
            </div>
        </div>
    </div>
    <div class="middler">
        <div class="middler-header">
            <div class="middler-child">
                <div class="middler-header-one">
                    <input type="checkbox" onclick="selectAll(this)" id="checkBoss"> 全选
                </div>
                <div class="middler-header-two"></div>
                <div class="middler-header-three">商品名称</div>
                <div class="middler-header-four">单价</div>
                <div class="middler-header-five">数量</div>
                <div class="middler-header-six">小计</div>
                <div class="middler-header-seven">操作</div>
            </div>
            <div class="middler-nav" id="middler_nav">
                <div class="middler-nav-one">
                    <div class="nav-one">
                        <div class="nav-two">
                            <input type="checkbox" name="cks" >
                        </div>
                        <div class="nav-three">
                            <img src="../../imgs/shopping1.png" alt="">
                        </div>
                        <div class="nav-four">
                            <a href="">小米11 青春版 8GB+128GB 清凉薄荷</a>
                        </div>
                        <div class="nav-five">
                            <a href="">2099元</a>
                        </div>
                        <div class="nav-six">
                            <div class="six-one">
                                <div class="six-one-one" onclick="reduceNumber(this)"  data-toggle="modal" >-</div>
                                <div class="six-one-two">1</div>
                                <div class="six-one-three" onclick="addCartProduct(this)">+</div>
                            </div>
                        </div>
                        <div class="nav-seven">
                            <a href="">2099元</a>
                        </div>
                        <div class="nav-eight">
                            <div class="eight-one">
                                <button  type="button"  data-toggle="modal" data-target="#myModal" onclick="addIndex(this)">x</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middler-nav-two" >
                    <div class="nav-one">
                        <div class="nav-two">
                            <input type="checkbox"  name="cks">
                        </div>
                        <div class="nav-three">
                            <img src="../../imgs/shopping2.png" alt="">
                        </div>
                        <div class="nav-four">
                            <a href="">Redmi Note 10 Pro 6GB+128GB 月魄</a>
                        </div>
                        <div class="nav-five">
                            <a href="">1599元</a>
                        </div>
                        <div class="nav-six">
                            <div class="six-one">
                                <div class="six-one-one">-</div>
                                <div class="six-one-two">1</div>
                                <div class="six-one-three">+</div>
                            </div>
                        </div>
                        <div class="nav-seven">
                            <a href="">1599元</a>
                        </div>
                        <div class="nav-eight">
                            <div class="eight-one">
                                <button  type="button"  data-toggle="modal" data-target="#myModal" onclick="addIndex(this)">x</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middler-nav-three">
                    <div class="nav-one">
                        <div class="nav-two">
                            <input type="checkbox"  name="cks">
                        </div>
                        <div class="nav-three">
                            <img src="../../imgs/shopping3.png" alt="">
                        </div>
                        <div class="nav-four">
                            <a href="">Xiaomi MIX 4 12GB+256GB 陶瓷黑</a>
                        </div>
                        <div class="nav-five">
                            <a href="">5799元</a>
                        </div>
                        <div class="nav-six">
                            <div class="six-one">
                                <div class="six-one-one">-</div>
                                <div class="six-one-two">1</div>
                                <div class="six-one-three">+</div>
                            </div>
                        </div>
                        <div class="nav-seven">
                            <a href="">5799元</a>
                        </div>
                        <div class="nav-eight">
                            <div class="eight-one">
                                <button  type="button"  data-toggle="modal" data-target="#myModal" onclick="addIndex(this)">x</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middler-last">
                    <div class="middler-last-one">
                        <a href="">继续购物&nbsp;<span>|</span></a>
                        <span>共<span class="three" id="totalNumberCart">3</span>件商品,已选择<span class="three"  id="selectedNumber">0</span>件</span>
                    </div>
                    <div class="middler-last-two">
                        <div class="two">
                            <input id="toSettle" type="button" disabled="true" value="去结算" style="width: 200px; height: 50px; border: 0px;">
                        </div>
                        <div class="one">
                            <a href="" id="countTotal">合计:&nbsp;<em>0</em>&nbsp;元</a>
                        </div>
                    </div>
                </div>
                <div class="end">
                    <div class="last">
                        <div class="last-one"></div>
                        <div class="last-two">
                            <a href="">买购物车中商品的人还买了</a>
                        </div>
                        <div class="last-three"></div>
                    </div>
                </div>

                <!-- 猜你喜欢部分 -->
                <div class="tail">
                    <div class="tail-one cc">
                        <img src="../../imgs/like1.png" alt="">
                        <h3>小米体重秤2</h3>
                        <p class="aa">59元</p>
                        <p class="bb">29.4万人好评</p>
                    </div>
                    <div class="tail-two cc">
                        <img src="../../imgs/like2.png"" alt="">
                        <h3>Redmi K40</h3>
                        <p class="aa">1999元</p>
                        <p class="bb">59.4万人好评</p>
                    </div>
                    <div class="tail-three cc">
                        <img src="../../imgs/like3.png"" alt="">
                        <h3>米家防飞溅指甲刀</h3>
                        <p class="aa">9.9元</p>
                        <p class="bb">67.4万人好评</p>
                    </div>
                    <div class="tail-four cc">
                        <img src="../../imgs/like4.png"" alt="">
                        <h3>日常元素 毛巾青春款</h3>
                        <p class="aa">19.9元</p>
                        <p class="bb">12.4万人好评</p>
                    </div>
                    <div class="tail-five cc">
                        <img src="../../imgs/like5.png"" alt="">
                        <h3>小米11青春版 马卡龙色系硅胶保护壳</h3>
                        <p class="aa">49元</p>
                        <p class="bb">1万人好评</p>
                    </div>
                    <div class="tail-six cc">
                        <img src="../../imgs/like6.png"" alt="">
                        <h3>米家声波电动牙刷T300</h3>
                        <p class="aa">99元</p>
                        <p class="bb">22.9万人好评</p>
                    </div>
                    <div class="tail-seven cc">
                        <img src="../../imgs/like7.png"" alt="">
                        <h3>米家电动剃须刀S500</h3>
                        <p class="aa">179元</p>
                        <p class="bb">18.6万人好评</p>
                    </div>
                    <div class="tail-eight cc">
                        <img src="../../imgs/like8.png"" alt="">
                        <h3>米家电动剃须刀S100</h3>
                        <p class="aa">78元</p>
                        <p class="bb">21.5万人好评</p>
                    </div>
                    <div class="tail-nine cc">
                        <img src="../../imgs/like9.png"" alt="">
                        <h3>小米10S</h3>
                        <p class="aa">2999元</p>
                        <p class="bb">17万人好评</p>
                    </div>
                    <div class="tail-ten cc">
                        <img src="../../imgs/like10.png"" alt="">
                        <h3>小米11</h3>
                        <p class="aa">3799元</p>
                        <p class="bb">2316人好评</p>
                    </div>
                </div>
            </div>
        </div>






        <!-- 删除商品的Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 200px;">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                
                </div>
                <div class="modal-body" style="font-size: 26px;width: 200px; height: 100px; margin: 50px auto;text-align: center;">
                确定要删除吗
                </div>
                <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal" style="background-color: rgb(176, 176, 176); color: white;">取消</button>
                <button type="button" class="btn" style="background-color: rgb(242, 88, 7); color: white;"  onclick="del()">确定</button>
                </div>
            </div>
            </div>
        </div>


        <!-- 商品个数减一的Modal -->
        <div class="modal fade" id="reduceNumberModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 200px;">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                
                </div>
                <div class="modal-body" style="width: 260px; height: 100px; margin: 50px auto;text-align: center;font-size: 26px;">
                修改个数不能小于0
                </div>
                <div class="modal-footer">
                <!-- <button type="button" class="btn" data-dismiss="modal" style="background-color: rgb(176, 176, 176); color: white;">取消</button> -->
                <button type="button" class="btn" style="background-color: rgb(242, 88, 7); color: white;"  onclick="">确定</button>
                </div>
            </div>
            </div>
        </div>
    </div>


    <!-- 底部公共部分 -->
    <div class="page-bottom">
        <ul class="address clear container">
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe607;</i>
                        <span>预约维修服务</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe603;</i>
                        <span>七天无理由退货</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe60f;</i>
                        <span>15天免费换货</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe778;</i>
                        <span>满69包邮</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe608;</i>
                        <span>520余家售后网点</span>
                    </a>

                </div>
            </li>
        </ul>
        <div class="bottom-message clear container">
            <ul class="bottom-list">
                <li>
                    <dl>
                        <dd>帮助中心</dd>
                        <dt><a href="">账户管理</a></dt>
                        <dt><a href="">购物指南</a></dt>
                        <dt><a href="">订单操作</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>服务支持</dd>
                        <dt><a href="">售后政策</a></dt>
                        <dt><a href="">自动服务</a></dt>
                        <dt><a href="">相关下载</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>线下门店</dd>
                        <dt><a href="">小米之家</a></dt>
                        <dt><a href="">服务网点</a></dt>
                        <dt><a href="">授权体验店</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>关于小米</dd>
                        <dt><a href="">了解小米</a></dt>
                        <dt><a href="">加入小米</a></dt>
                        <dt><a href="">投资者关系</a></dt>
                        <dt><a href="">企业社会责任</a></dt>
                        <dt><a href="">廉洁举报</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>关注我们</dd>
                        <dt><a href="">新浪微博</a></dt>
                        <dt><a href="">官方微信</a></dt>
                        <dt><a href="">联系我们</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>特色服务</dd>
                        <dt><a href="">F码通道</a></dt>
                        <dt><a href="">礼物码</a></dt>
                        <dt><a href="">防伪查询</a></dt>
                    </dl>
                </li>
            </ul>
            <div class="contact">
                <h2>400-100-5678</h2>
                <p>8:00-18:00（仅收市话费）</p>
                <a href="">
                    <div class="customer">
                        <i class="iconfont">&#xe605;</i>
                        <span>人工客服</span>
                    </div>
                </a>
                <div class="wbwx">
                    <span>关注小米：</span>
                    <a href=""><i class="iconfont">&#xe613;</i></a>
                    <a href=""><i class="iconfont">&#xe604;</i></a>
                </div>
            </div>
        </div>
    </div>


    <script src="../../plugins/jquery/jquery.min.js"></script>
    <script src="../../plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../../js/shopping_cart.js"></script>


    <script>
        $('#myModal').modal('hide')
    </script>
</body>
</html>